<template>
  <div class="swiper">
    <img class="curImg" :src=curImg alt="">
    <div class="preContainer" @click="onPreClick">
      <img class="pre" src="@/assets/icon/left.png" alt="">
    </div>
    <div class="nextContainer" @click="onNextClick">
      <img class="next" src="@/assets/icon/right.png" alt="">
    </div>
  </div>
</template>

<script>
export default {
  name: "wsl-swiper",
  props:{
    imgArr:{
      type: Array,
      default(){
        return[require('@/assets/swiper/deer.png'), require('@/assets/swiper/lion.png'),require('@/assets/swiper/monkey.png')]
      }
    }
  },
  data() {
    return {
      curImg: '',
      index: 0
    }
  },
  methods: {
    onPreClick(){
      this.index++
      this.index = this.index % this.imgArr.length
      this.curImg = this.imgArr[this.index]
    },
    onNextClick() {
      this.index--
      if(this.index<0) this.index+=this.imgArr.length
      this.index = this.index % this.imgArr.length
      this.curImg = this.imgArr[this.index]
    }
  },
  created() {
    this.curImg = this.imgArr[this.index]
  }
}
</script>

<style scoped>
.swiper{
  position: relative;
  width: 400px;
  height: 250px;
  background-color: pink;
}
.curImg{
  width: 400px;
  height: 250px;
  background-color: pink;
}
.nextContainer,.preContainer{
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translate(0,-50%);
  width: 30px;
  height: 30px;
  background-color: rgba(0,0,0,.2);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.preContainer{
  top: 50%;
  left: 10px;
}
.pre,.next{
  width: 10px;
  height: 10px;
}
</style>